<template>
	<div class="book">
		<div v-show="active == 0" class="book_shelf">
			<van-pull-refresh v-model="isLoading" @refresh="GetBookShelfList" success-text="刷新成功" :head-height="50">
				<van-skeleton title avatar :row="3" :loading="isLoading">
					<van-cell title="我的书架" style="
              font-size: 24px;
              font-weight: bold;
              border: none;
              top: 20px;
              bottom: 20px;
            " />
					<ul class="book_list" v-if="bookShelfList.length > 0" style="margin-top: 30px">
						<li @click="toReadBook(book.bId)" v-for="book in bookShelfList" :key="book.bId">
							<van-swipe-cell>
								<img :src="book.coverImg" alt="封面" />
								<div class="book_info">
									<p class="row" style="font-size: 18px; font-weight: 600; margin-top: 20px">
										{{ book.bName }}
									</p>
									<p class="row" style="font-size: 14px">
										最新：{{ book.newChapter }}
									</p>
									<p class="row" style="font-size: 14px">
										<van-icon name="underway-o" /> {{ book.updateTime }}
									</p>
								</div>
								<template #right>
									<van-button square type="danger" text="删除" style="height: 130px"
										@click="delBook(book.bId)" />
								</template>
							</van-swipe-cell>
						</li>
					</ul>
					<van-empty v-else description="快去书城添加你喜欢的书籍吧" />
				</van-skeleton>
			</van-pull-refresh>
		</div>
		<div v-show="active == 1" class="book_city book_shelf">
			<van-search v-model="search" shape="round" background="#4fc08d" placeholder="可搜书名和作者，请您少字也别输错字。"
				@search="onSearch" @clear="onSearch" />
			<van-pull-refresh v-model="isLoading" @refresh="onSearch" success-text="刷新成功" :head-height="50">
				<ul class="book_list" style="height: calc(100% - 110px) !important">
					<li v-for="(book, i) in bookList" :key="i">
						<img :src="book.coverImg" alt="封面" />
						<div class="book_info">
							<p class="row" style="font-size: 18px; font-weight: 600">
								{{ book.bName }}
							</p>
							<p class="row" style="font-size: 14px">
								最新：{{ book.newChapter }}
							</p>
							<p class="row" style="font-size: 14px">
								<van-icon name="underway-o" /> {{ book.updateTime }}
							</p>
							<p class="row">
								<van-button :disabled="
                    bookShelf.indexOf(book.bId + '') < 0 ? false : true
                  " v-if="book.bId > 0" type="primary" size="mini" @click="addBookShelf(book.bId)">加入书架</van-button>
								<van-button v-else type="primary" size="mini" :disabled="downloadLoad"
									@click="getCatalogue(book.url)">收录书籍</van-button>
							</p>
						</div>
					</li>
				</ul>
			</van-pull-refresh>
		</div>
		<div v-show="active == 2" class="classification">
			<van-sidebar v-model="activeKey" @change="onChange">
				<van-sidebar-item title="全部" />
				<van-sidebar-item title="玄幻" />
				<van-sidebar-item title="修真" />
				<van-sidebar-item title="都市" />
				<van-sidebar-item title="穿越" />
				<van-sidebar-item title="网游" />
				<van-sidebar-item title="科幻" />
			</van-sidebar>
			<div class="classification_list">
				<van-loading size="24px" v-if="classificationLoad" vertical>加载中...</van-loading>
				<van-empty v-if="ClassificationList.length==0 && !classificationLoad" description="" />
				<van-swipe-cell v-else v-for="(book,i) in ClassificationList" :key="i">
					<van-cell :border="false" :title="i+1" :value="book.bName" />
					 <template #right>
						<van-button square type="primary" text="收录书籍" @click="getCatalogue(book.url)" :disabled="downloadLoad" />
					</template>
				</van-swipe-cell>
			</div>
		</div>
		<div v-show="active == 3" class="my">
			<van-cell is-link center>
				<template #title>
					<van-image round width="70px" height="70px" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
					<span class="custom-title">点击登录</span>
				</template>
			</van-cell>
			<van-cell is-link class="van_cell" title="消息通知" icon="shop-o">
			</van-cell>
			<van-cell is-link class="van_cell" title="最近浏览" icon="shop-o">
			</van-cell>
			<van-cell is-link class="van_cell" title="分享应用" icon="shop-o">
			</van-cell>
			<van-cell is-link class="van_cell" title="缓存管理" icon="shop-o">
			</van-cell>
			<van-cell is-link class="van_cell" title="设置" icon="shop-o"> </van-cell>
		</div>
		<van-tabbar v-model="active" @change="tabbarChange">
			<van-tabbar-item icon="home-o">书架</van-tabbar-item>
			<van-tabbar-item icon="search">书城</van-tabbar-item>
			<van-tabbar-item icon="friends-o">分类</van-tabbar-item>
			<van-tabbar-item icon="setting-o">我的</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	import { Notify } from 'vant';
	import {
		Toast
	} from "vant";
	import {
		getBookList,
		getSearch,
		getBookShelfList,
		getCatalogue,
		getClassificationList
	} from "@/api/index.js";
	export default {
		name: "book",
		data() {
			return {
				active: 0,
				isLoading: false,
				params: {
					page: 1,
					key: "",
					intPageSize: 1000,
				},
				bookList: [],
				search: "",
				bookShelfList: [],
				bookShelf: [],
				downloadLoad: false,
				activeKey:0,
				allClassificationList:[],
				ClassificationList:[],
				classificationLoad:false,		
			};
		},
		mounted() {
			this.GetBookShelfList();
		},
		methods: {
			// onRefresh() {
			//   this.isLoading = true;
			//   setTimeout(() => {
			//     // Toast("刷新成功");
			//     this.isLoading = false;

			//   }, 1000);
			// },
			GetBookShelfList() {
				var bIds = window.localStorage.getItem("bookShelf");
				if (bIds == null || bIds == undefined || bIds == "") {
					this.bookShelfList = [];
					this.bookShelf = [];
					window.localStorage.setItem("bookShelf", this.bookShelf);
				} else {
					this.bookShelf = bIds.split(",");
					this.isLoading = false;
					getBookShelfList({
						bIds: bIds,
					}).then((data) => {
						this.isLoading = false;
						if (data.success) {
							this.bookShelfList = data.response;
						}
					});
				}
			},
			addBookShelf(bId) {
				var bIds = window.localStorage.getItem("bookShelf");
				if (bIds == null || bIds == undefined || bIds == "") {
					this.bookShelf = [];
				} else {
					this.bookShelf = bIds.split(",");
				}
				if (this.bookShelf.indexOf(bId) < 0) {
					this.bookShelf.push(bId + "");
					window.localStorage.setItem("bookShelf", this.bookShelf);
					this.onSearch();
				}
			},
			delBook(bId) {
				var bIds = window.localStorage.getItem("bookShelf");
				if (bIds == null || bIds == undefined || bIds == "") {
					this.bookShelf = [];
				} else {
					this.bookShelf = bIds.split(",");
				}
				var arr = [];
				this.bookShelf.forEach((i) => {
					if (i != bId) {
						arr.push(i);
					}
				});
				this.bookShelf = arr;
				window.localStorage.setItem("bookShelf", this.bookShelf);
				this.GetBookShelfList();
			},
			toReadBook(bId) {
				var cId = window.localStorage.getItem("cId" + bId);
				this.$router.push({
					path: "/ReadBook",
					query: {
						bId: bId,
						cId: cId
					}
				});
			},
			GetBookList() {
				this.isLoading = true;
				getBookList(this.params).then((data) => {
					this.isLoading = false;
					if (data.success) {
						this.bookList = data.response.data;
					}
				});
			},
			GetSearch() {
				this.isLoading = true;
				getSearch({
					searchkey: this.search,
				}).then((data) => {
					this.isLoading = false;
					if (data.success) {
						this.bookList = data.response;
					}
				});
			},
			onSearch() {
				if (this.search == "") {
					this.GetBookList();
				} else {
					this.GetSearch();
				}
			},
			tabbarChange() {
				if (this.active == 0) {
					if(this.bookShelfList.length==0)
						this.GetBookShelfList();
				}
				if (this.active == 1) {
					if(this.bookList.length==0)
						this.onSearch();
				}
				if(this.active==2){
					if(this.allClassificationList.length==0)
						this.GetClassificationList()
				}
			},
			getCatalogue(url) {
				this.downloadLoad = true;
				Notify({ type: 'warning', message: '收录书籍进行中，请耐心等待...' });
				getCatalogue({
					url: url,
				}).then((data) => {
					this.downloadLoad = false;
					this.onSearch();
				});
			},
			onChange(){
				if(this.activeKey==0){
					this.ClassificationList=this.allClassificationList;
				}else{
					this.ClassificationList=this.allClassificationList.filter(a=> a.category==this.activeKey-1);
				}
			},
			GetClassificationList(){
				this.classificationLoad=true;
				getClassificationList().then((data) => {
					this.classificationLoad=false;
					if (data.success) {
						this.allClassificationList = data.response;
					}
					if(this.activeKey==0){
						this.ClassificationList=this.allClassificationList;
					}else{
						this.ClassificationList=this.allClassificationList.filter(a=> a.category==this.activeKey-1);
					}
					
				});
			}
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	.book {
		margin: 0;
		padding: 0;

		.book_shelf {
			height: 100%;
			width: 100%;

			/deep/ .van-pull-refresh {
				height: calc(100vh - 80px) !important;
				overflow: auto !important;
				// background-color: red !important;
			}

			.book_list {
				list-style: none;
				padding: 0;
				overflow: overlay;
				height: calc(100% - 50px);
				width: 100%;
				position: fixed;

				li {
					position: relative;
					overflow: hidden;
					border-bottom: 1px solid #eee;
					padding: 6px 0px;

					img {
						height: 120px;
						width: 100px;
						float: left;
						margin-left: 20px;
						border-radius: 10px;
					}

					.book_info {
						height: 120px;
						width: calc(100% - 160px);
						vertical-align: middle;
						float: left;
						padding-left: 10px;
						padding-right: 10px;

						p {
							margin: 8px 0px;
							text-align: left;
						}

						.row {
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							word-break: break-all;
						}

						.rows {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}
				}

				li:active {
					background: #eee;
				}
			}
		}

		.my {
			height: calc(100vh - 50px) !important;
			width: 100%;
			background: #eee;

			.van_cell {
				margin: 10px 0px;
			}

			.custom-title {
				line-height: 70px;
				font-size: 18px;
				font-weight: 540;
				position: fixed;
				margin-left: 10px;
			}
		}
		.classification{
			.classification_list{
				width: calc(100% - 80px) !important;
				height: 100%;
				position: absolute;
				right: 0;
				top: 0;
				overflow-y: auto;
			}
		}
	}

	.van-nav-bar {
		background: #eee;

		// 因为style标签上有 lang='less'  所以.van-nav-bar__title 可以嵌套到.van-nav-bar里面
		/* /deep/ 就是把data-v-hash值选择器写到类名的前面 */
		/deep/ .van-nav-bar__title {
			color: white;
		}
	}

</style>
